<template>
    <div class="app-container">
        <el-row>
            <el-col :span="24" :xs="24" class="cav-map">
                <div id="cesiumContainer" v-loading="loading" 
                    element-loading-text="构建三维模型中"
                    element-loading-spinner="el-icon-loading"
                    element-loading-background="rgba(0, 0, 0, 0.8)"
                 v-show="cesiumShow"></div>
                <div id="map" v-show="!cesiumShow"></div>
                <div class="setMap">
                    <!-- <div class="threeDserver mapbox" @click="cesiumMap('3Dserver')" :class="showMapType=='3Dserver'?'active':''">
                        <span>三维影像</span>
                    </div> -->
                    <div class="mapserver mapbox" @click="setMap('mapserver')" :class="showMapType=='mapserver'?'active':''">
                        <span>矢量地图</span>
                    </div>
                    <div class="imgserver mapbox" @click="setMap('imgserver')" :class="showMapType=='imgserver'?'active':''" >
                        <span>影像地图</span>
                    </div>
                </div>
                <div class="left-list-group">
                    <div class="content-list"  :class="showLeftList?'':'contentHiddenList'" >
                        <el-card shadow="never" class="dataListItem">
                            <div class="projectManages proDataList">
                                    <!-- <el-tabs v-model="showTable" type="card"  @tab-click="handleClick" >
                                        <el-tab-pane label="数据列表" name="proDataList" class="proDataList"> -->
                                            <div class="projectName">
                                                <span class="name" :title="projectName">
                                                    {{projectName}}
                                                </span>
                                                <el-button
                                                    size="mini"
                                                    @click="resetproject"
                                                    class="projectBtn"
                                                >切换项目</el-button>
                                            </div>
                                            <el-tree
                                            show-checkbox
                                            :props="zoneMethodsProps"
                                            :default-expanded-keys="defaultExpandedKeys"
                                            node-key="id"
                                            :data = "zoneMethods"
                                            ref="tree"
                                            class="proZtree"
                                            :check-strictly="false"
                                            @node-click="closeMenu"
                                            >
                                                <span class="custom-tree-node" slot-scope="{ node, data }">
                                                    <template v-if="data.methodName!=null">
                                                        <span>{{ node.label }}</span>
                                                        <span class="uploadIcon">
                                                            <el-button
                                                                type="text"
                                                                size="medium"
                                                                icon="el-icon-upload"
                                                                @click.stop="() => openUploadPage(data,node)">
                                                            </el-button>
                                                        </span>
                                                    </template>
                                                    <template v-else-if="data.phase!=null">
                                                        <span class="checkbox">
                                                            <input name="circle" type="checkbox" @click="dataListItemClick($event,data)" :value="data.phase" />
                                                        </span>
                                                        <span>{{ node.label }}</span>
                                                    </template>
                                                    <template v-else>
                                                        <span>{{ node.label }}</span>
                                                    </template>
                                                </span>
                                            </el-tree>
                                        <!-- </el-tab-pane> -->
                                        <!-- <el-tab-pane label="课题二数据" name="proDataList2">
                                            <ul class="project-list project-list--text">      
                                                <li tabindex="0" class="project-list__item" v-for="(item,index) in topicTow" :key="index" :class="[index === topicCurrent? 'a-focus':'']">
                                                    <a class="project-list__item-name" @click="topicCheckChange(item,index,$event)" >{{item.name}}</a>
                                                </li>
                                            </ul>
                                        </el-tab-pane>
                                    </el-tabs>    -->
                            </div>
                        </el-card>
                        <div class="content-list-show">
                            <el-button size="mini" class="button" @click="taggleLeftList" >
                                <i :class="showLeftList?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="erro-list-group">
                    <div class="erro-list" :class="showErroList?'':'hiddenList'" >
                        <div class="erro-list-show">
                            <el-button size="mini" class="button" @click="taggleErroList" >
                                <i :class="showErroList?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
                            </el-button>
                        </div>
                        <el-tabs type="border-card"  v-model="editableTabsValue">
                            <el-tab-pane label="异常" name="异常"  v-if="errorData.length">
                                <detail-list  :flyToFeature="flyToFeature" :dataList="errorData" @listenDeleteChange="deleteChange" />
                            </el-tab-pane>
                            <el-tab-pane label="监测" name="监测" v-if="siteDataList.length">
                                <site-list :dataToSite="dataToSite" :flyToFeature="flyToFeature" :dataList="siteDataList" @listenDeleteChange="deleteChange"  />
                            </el-tab-pane>
                            <el-tab-pane label="ERT" name="ERT" v-if="ertDataList.length">
                                <ert-list :dataToSite="dataToSite" :flyToFeature="flyToFeature" :dataList="ertDataList" @listenDeleteChange="deleteChange"/>
                            </el-tab-pane>
                            <el-tab-pane label="遥感" name="遥感" v-if="historyImageList.length">
                                <history-list  :dataToSite="dataToSite" :flyToFeature="flyToFeature" :dataList="historyImageList" @listenSelectChange="selectChange"  />
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                </div>
                <div class="right-list-group">
                    <div class="content-list" :class="showRightList?'':'contentHiddenList'" >
                        <div class="content-list-show">
                            <el-button size="mini" class="button" @click="taggleRightList" >
                                <i :class="showRightList?'el-icon-caret-bottom':'el-icon-caret-top'"></i>
                            </el-button>
                        </div>
                    </div>
                </div>
                <div class="block" v-if="pnameList.length">
                        <span class="icon" @click="closeWms">清除</span>
                        <div class="row">
                            <el-radio-group v-model="radio" @change="changePic">
                                <el-radio class="el_radio" v-for="(item,index) in pnameList" :key="index" :label="item">{{item}}</el-radio>
                            </el-radio-group>
                        </div>
                        <div class="row">
                            <span>深度选择：</span>
                            <el-slider class="slider"
                            v-model="sliderValue"
                            range
                            @change="changePic"
                            show-stops
                            :min="0"
                            :step="0.1"
                            :max="this.pheightList">
                            </el-slider>
                        </div>  
                </div>
                <popup></popup>
            </el-col>
        </el-row>
        <!-- --------------------------------------------------------------tsg--------------------------------------------------------------------------------- -->
        <el-dialog
            title="项目选择"
            :close-on-click-modal="false"
            :visible.sync="selectProject"
            custom-class="dialogBox"
            append-to-body>
            <div class="selectProjectBox">
                <div v-for="(item,index) in projectListData" :key="index">
                    <el-radio v-model="checkedProject" :label="item" size='medium'>{{item.projectName}}</el-radio >
                </div>
            </div>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 绘图页面 -->
        <el-dialog
            title="反演图"
            :visible.sync="showImage"
            :modal="false"
            :close-on-click-modal="false"
            custom-class="dialogBox"
            append-to-body>
            <div class="selectProjectBox">
                <canvasDraw/>
            </div>
            <div
                slot="footer"
                class="dialog-footer">
                <el-button
                    type="primary"
                    @click="submitForm"
                >确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import {projectZtree,getRouteList,getEmData,getPname,getDepthRange,getRenderDrillImg} from "@/api/data/proData"
import {getProjectPhase} from "@/api/data/proDataForup"
import FeatureStyle from '@/assets/dist/FeatureStyle'
import popup from './popup/index'
import canvasDraw from './popup/drawCanvas'
import detailList from './detail/detailList'
import ertList from './detail/ertList'
import siteList from './detail/siteList'
import historyList from './detail/historyList'
import * as Cesium from 'cesium/Cesium'
import * as widgets from "cesium/Widgets/widgets.css";
import EChartsLayer from 'ol3-echarts';
import { listProject} from "@/api/project/project";
export default {
    name: "Data",
    components: {
		popup,
        detailList,
        siteList,
        ertList,
        historyList,
        canvasDraw
	},
    data() {
        return {
            //课题二数据
            topicTow:[
                {name:"反距离权重-idw",id:'1'},
                {name:"3D克里格 -ok",id:'2'},
                {name:"径向基函数插值 -rbf",id:'3'},
                {name:"随机森林和模型插值混合-rfidw",id:'4'},
                {name:"随机森林 -rf",id:'5'},
                ],
            //是否显示
            visible:false,
            //右击出现位置
            left:250,top:'',
            //右击目标url
            tagRight:'',
            //展示表头
            showTable:'proDataList',
            //项目详情
            projectDatail:{} ,
            //项目树形图
            proZtreeData : [], 
            //数据树形图
            dataZtree:[],
            //数据默认选中
            dataCheck:[],
            //默认展开和选中
            isCheck:[],
            //ztree过滤参数
            filterText:"",
            //项目ztree默认配置
            defaultProps: {
                children: 'zoneList',
                label: 'label'
                },
            //当前显示地图类型
            showMapType : this.$store.state.showMapType,
            //异常数据列表
            errorData:[],
            //污染调查数据
            siteData:{},
            //ert数据列表
            ertDataList:[],
            //污染调查数据列表
            siteDataList:[],
            //选中标记
            current:0,
            //初始化地图中心点坐标
            center:[],
            // 底图 图层变量
            baseMapLayer :{
                tileLayer: new ol.layer.Tile({
                source: new ol.source.XYZ({
                url: "http://t{1-7}.tianditu.com/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=df5b7775fab31595f6c43caadb9af47d"
                    })
                }),
                labelLayer: new ol.layer.Tile({
                    zIndex: 1,
                    source: new ol.source.XYZ({
                    url: "http://t{1-7}.tianditu.com/DataServer?T=cva_w&x={x}&y={y}&l={z}&tk=4b82bec6c2d654c948e324589673371f"
                    })
                })
            },
            //变量
            MyMap:undefined,
            selectSingleClick:{},
            wktLayers : {},
            vetorList : [],
            overlay :undefined,
            //分区id
            zoneId:null,
            //cesium地图对象
            viewer:undefined,
            //cesium地图是否显示
            cesiumShow:false,
            // 数据勾选右侧展示==============tsg======================
            projectId:null,
            //方法
            zoneMethods:[],
            //方法对象
            zoneMethodsProps:{
                children: 'children',
                label: 'name'
            },
            //加载蒙版
            loading:false,
            //点集数据集
            pointPrimitives:undefined,
            //课题二标题显示
            topicCurrent:undefined,
            // 数据勾选右侧展示==============tsg======================
            //默认展开显示数据
            defaultExpandedKeys:[],
            //当前数据类别
            dataToSite:{},
            //遥感影像
            wmsLayerLisy:[],
            //钻孔数据值
            pnameList:[],
            //钻孔高度范围
            pheightList:15,
            //钻孔高度范围
            sliderValue:[0,14],
            //钻孔数据值选项
            radio:'',
            //钻孔图层url
            layerImgUrl:"",
            //数据管理页面参数
            uploaddata:{},
            //历史映像
            historyImageList:[],
            //列表显示
            showErroList:false,
            //右侧列表显示
            showRightList:false,
            //显示列表
            editableTabsValue:"",
            //列表种类
            tablesList:[],
            //echart列表
            echartlayers:undefined,
            //项目列表
            projectListData:[],
            //项目列表是否出现
            selectProject:false,
            //项目选择
            checkedProject:"",
            projectName:null,
            //左侧数据栏
            showLeftList:true,
            //反演图展示
            showImage:true
        };
    },
    created(){
        this.projectId = this.$route.params.ID;
        this.projectName =  this.$route.query.projectName;
        this.getProjectList()
        if(this.projectId==":ID"){
            this.selectProject = true
        }
        else{
            this.dataToSite.projectId = this.projectId
        }
    },
    mounted(){
        this.createMap();
        this.setCesiumMap()
    },
    watch: {
        visible(value) {
            if (value) {
                document.body.addEventListener('scroll', this.closeMenu)
                document.body.addEventListener('click', this.closeMenu)
            } else {
                document.body.removeEventListener('click', this.closeMenu)
            }
        },
      filterText(val) {
        this.$refs.tree.filter(val);
      },
      //显示地图类型切换
      showMapType(val){
          this.$store.state.showMapType = val;
      },
      //异常列表变换绘点
      errorData(val){
          val.forEach(data=>{
            this.drawWKT(data,'abnormalId','abName');
        })
      },
     //项目id切换
      projectId(val){
        this.getZoneLists()
      },
      //三维地图切换清除数据
      cesiumShow(val){
          if(!val&&this.pointPrimitives){
                this.pointPrimitives.removeAll()
          }
      },
      //数据点击切换
      tablesList(val){
            if(val.length){
                this.editableTabsValue=val[val.length-1]
            }
        }
    },
    methods: {
        //列表选择点击   
        dataListItemClick(e,data){
            let checked = e.target.checked
            let resdata = JSON.parse(JSON.stringify(data))
            let Pname =this.$refs.tree.getNode(data.id).parent.data.name
            this.zoneId = data.zoneId
            resdata.name= Pname
             //EM数据单独处理
            if(resdata.name =="EM"){
                if(checked){
                    getEmData(data.phase).then(res=>{
                        this.echartlayers = this.drawEm(res)
                    })
                }
                else{
                    if(this.echartlayers!=undefined){
                        this.echartlayers.remove()
                    }
                }
                return
                }
            if(!data.children){
                if(data.phase){
                // this.clearWKT()
                    if(checked){
                        this.showErroList=true
                        this.$store.dispatch('getGeoListData',data.phase).then(
                            ()=>{
                                let res = this.$store.getters.siteData
                                this.siteData[resdata.name+data.phase] = res;
                                if(resdata.name =="ERT"){ //ERT数据另一个表格显示
                                    this.ertDataList = this.ertDataList.concat(res)
                                    this.ertIndex= this.ertIndex+this.zIndex
                                    // this.editableTabsValue = "ERT"
                                    this.tablesList.push("ERT")
                                }
                                else if(resdata.name =="遥感"){
                                    this.historyImageList = this.historyImageList.concat(res)
                                    this.historyIndex= this.historyIndex+this.zIndex
                                    // this.editableTabsValue = "遥感"
                                    this.tablesList.push("遥感")
                                    return
                                }
                                else{
                                    this.siteDataList = this.siteDataList.concat(res)
                                    this.siteIndex= this.siteIndex+this.zIndex
                                    // this.editableTabsValue = "监测"
                                    this.tablesList.push("监测")
                                }
                                res.forEach(data=>{
                                    this.drawWKT(data,"id","name") 
                                })
                                if(res.length==0){
                                    this.msgError("该批次无数据信息！");
                                }
                                if(resdata.name =="钻孔取样"){
                                    this.getPnameData(resdata)
                                    this.getDepthRangeData(resdata)
                                }
                                this.dataToSite.dataType = Pname
                            })
                        }
                    else{
                        if(resdata.name =="钻孔取样"){
                            this.pnameList=[]
                        }
                        this.siteData[resdata.name+data.phase].forEach(data=>{
                            this.removeWKT(data,"id","name")
                            if(resdata.name =="ERT"){
                                let i=this.ertDataList.indexOf(data)
                                i>-1&&this.ertDataList.splice(i,1)
                                let name=this.tablesList.indexOf("ERT")
                                name>-1&&this.tablesList.splice(name,1)
                            }
                            else if(resdata.name =="遥感"){
                                let i=this.historyImageList.indexOf(data)
                                i>-1&&this.historyImageList.splice(i,1)
                                let name=this.tablesList.indexOf("遥感")
                                name>-1&&this.tablesList.splice(name,1)
                            }
                            else{
                                let i=this.siteDataList.indexOf(data)
                                i>-1&&this.siteDataList.splice(i,1)
                                let name=this.tablesList.indexOf("监测")
                                name>-1&&this.tablesList.splice(name,1)
                            }
                        })
                        delete this.siteData[resdata.name+data.phase]
                    }    
                }
                else if(data.methodName=="道路空洞检测"){
                    if(checked){
                        this.getProData(data.zoneId)
                        // this.editableTabsValue = "异常"
                        this.tablesList.push("异常")
                        }
                    else{
                        this.clearWKT();
                        let i=this.tablesList.indexOf("异常")
                        i>-1&&this.tablesList.splice(i,1)
                    }
                }
            }
        },
        //获取项目列表
        getProjectList(){
            listProject(1).then(
                response => {
                    this.projectListData = response.data;
                }
            );
        },
        //项目选择确认
        submitForm(){
            console.log(this.checkedProject)
            // this.projectId = this.checkedProject.projectId
             this.$router.replace({ name:'Data/:ID',params:{ID:this.checkedProject.projectId},query:{projectName:this.checkedProject.projectName} });
            this.selectProject = false;
        },
        // 项目选择取消
        cancel(){
            this.selectProject = false;
        },
        //项目切换按钮
        resetproject(){
            this.selectProject = true;
        },
        //关闭钻孔渲染
        closeWms(){
            this.radio =""
            this.removeLayerImage(this.layerImgUrl)
        },
         // 右击按钮
        rightClick(e,data,node) {
            if(!data.phase&&data.methodId){
                this.uploaddata.zoneName = node.parent.data.name
                this.uploaddata.projectId = data.projectId
                this.uploaddata.zoneId = data.zoneId
                this.uploaddata.methodId = data.methodId
                this.uploaddata.methodName = data.name
                const menuMinWidth = 10
                const offsetLeft = this.$el.getBoundingClientRect().left // container margin left
                const offsetWidth = this.$el.offsetWidth // container width
                const maxLeft = offsetWidth - menuMinWidth // left boundary
                const left = e.clientX - offsetLeft + 15 // 15: margin right
                this.top = e.clientY-80
                this.visible = true
            }
            else{
               this.visible = false 
            }
        },
        //右击确认
        openUploadPage(data,node){
            if(!data.phase&&data.methodId){
                this.uploaddata.zoneName = node.parent.data.name
                this.uploaddata.projectId = data.projectId
                this.uploaddata.zoneId = data.zoneId
                this.uploaddata.methodId = data.methodId
                this.uploaddata.methodName = data.name
               this.$router.push({ name:'Manage',query:this.uploaddata });
            }
        },
        //取消右击显示
        closeMenu() {
            this.visible = false
        },
        //获取分区列表
        getZoneLists(){
            getProjectPhase(this.projectId).then(res=>{
                this.zoneMethods = res.data
                this.zoneMethods.map(item1=>{
                    if(item1.theGeom){
                        this.drawWKT2(item1,"projectId","zoneId")  
                        let thgeom = item1.theGeom
                        let geoms = thgeom.split(",")[1].split(" ")
                        let view = this.MyMap.getView();
                        view.setZoom(14)
                        view.setCenter([parseFloat(geoms[0]),parseFloat(geoms[1])]) 
                        }
                    this.defaultExpandedKeys.push(item1.zoneId)
                    item1.id= item1.zoneId
                    if(item1.children){
                        item1.children.map(item2=>{
                            item2.id= item2.methodId
                            if(item2.children){
                                    item2.children.map(item3=>{
                                    item3.id = item3.phase+item3.methodId})
                                // }
                            }
                        })
                    }
                })
                
            })
        },
        //三维影像
        cesiumMap(mapType){
            this.cesiumShow = true;
            this.showMapType = mapType;
        },
        //渲染三维地图
        setCesiumMap(){
             this.viewer = new Cesium.Viewer("cesiumContainer", {
                    imageryProvider: new Cesium.WebMapTileServiceImageryProvider({
                        url: "http://t1.tianditu.com/img_c/wmts?service=WMTS&version=1.0.0&request=GetTile&tilematrix={TileMatrix}&layer=img&style=default&tilerow={TileRow}&tilecol={TileCol}&tilematrixset=c&format=tiles&tk=4b82bec6c2d654c948e324589673371f",
                        layer: "img",
                        style: "default",
                        format: "tiles",
                        tileMatrixSetID: 'c',
                        subdomains: ['t0', 't1', 't2', 't3', 't4', 't5', 't6', 't7'],
                        maximumLevel: 17,
                        tilingScheme: new Cesium.GeographicTilingScheme(),
                        tileMatrixLabels: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18']
                    }),
                    baseLayerPicker: false,
                    animation: false,
                    timeline: false,
                    geocoder:false,
                    homeButton:false,
                    sceneModePicker:false,
                    navigationHelpButton:false,
                    fullscreenButton:false,
                    vrButton:false,
            }); 
        },
        //课题二：改变数据点集
        topicCheckChange(data, index){
                this.topicCurrent = index;
                let url ="undefined"
                if(data.id=="1"){url = "new_json.json"}
                else if(data.id=="2"){url = "third_json.json"}
                else if(data.id=="3"){url = "second_json.json"}
                else if(data.id=="4"){url = "forth_json.json"}
                else{ url = "fifth_json.json"}  
                this.cesiumMap('3Dserver')
                this.viewer.camera.flyTo({
                // fromDegrees()方法，将经纬度和高程转换为世界坐标
                    destination:Cesium.Cartesian3.fromDegrees(113.25204863058993, 23.083977954618362,1500.0),
                });
                if(this.pointPrimitives){
                    this.pointPrimitives.removeAll()
                }
                this.pointPrimitives = this.viewer.scene.primitives.add(new Cesium.PointPrimitiveCollection());
                this.loading = true
                    // require("./SampleData/"+url)
                var that = this
                     Cesium.Resource.fetchJson("./SampleData/"+url)
                        .then(function (dataJson) { 
                            for (var x = 0; x < 1; x++) {
                                var series = dataJson[x];
                                var seriesName = series[0];
                                var coordinates = dataJson[1];
                                let testdata=[
                                23.083978,113.2520487,15,700
                                ]
                                for (var i = 0; i < coordinates.length; i++) {
                                    var latitude = coordinates[i][1];
                                    var longitude = coordinates[i][0];
                                    var height = coordinates[i][2];
                                    var colorHsl = coordinates[i][3]<0?0:coordinates[i][3];
                                    if (colorHsl === 0) {
                                        continue;
                                    }
                                    var entity = {
                                        position: Cesium.Cartesian3.fromDegrees(longitude,latitude,15-height),
                                        color: Cesium.Color.fromHsl(0.6 - colorHsl/8000 * 0.5, 1.0, 0.5),
                                        pixelSize: 2,
                                        }
                                that.pointPrimitives.add(entity);
                                }
                            }
                            that.loading = false
                        }).otherwise(function (error) {
                            //Otherwise will catch any errors or exceptions that occur
                            //during the promise processing. When this happens,
                            //we raise the error event and reject the promise.
                            return Cesium.when.reject(error);
                            });                
        },
        //没有可点击属性的图层添加
        drawWKT2(geomstring,objId,objName) {
                let wkt = geomstring.theGeom
                let format = new ol.format.WKT(wkt)
                let feature = format.readFeature(wkt)
                feature.properties=geomstring
                const geoType = this.getGeoType(wkt); //判断数据点线面  
                // let mycolor = geomstring.showColor
                let vectorWKT = new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: [feature]
                        }),
                        opacity: 0.9,
                        style:FeatureStyle.getStyle(geoType,geomstring.abStatus)
                })
                // this.vetorList.push(vectorWKT)
                // this.wktLayers[geomstring[objId]+geomstring[objName]] = vectorWKT
                this.MyMap.addLayer(vectorWKT);
            },
        // ===============================================tsg====================================================
        //重置数据渲染
        restData(){
            this.errorData = [];//重置异常列表数据
            this.dataZtree.length&&this.dataZtree.forEach((val)=>{
                if(val.children!=undefined){
                    val.children.map((data)=>{
                        this.dataCheckChange(data,false,'null') //清空所有绘制的图层
                    })
                }
            })
            this.dataZtree=[]
        },    
        //点击标签
        handleClick(tab, event){
            // this.activeName = tab.name
            // if(tab.name=="proDataList2"){
            //     this.cesiumMap('3Dserver')
            // }
            // else if(tab.name=="proDataList"){
            //     this.setMap('mapserver')
            // }
            // if(tab.name==="projectDesign"){
            //     if(this.projectDatail.children!=undefined){
            //         this.dataZtree=[];
            //         this.Message({
            //             message:"必须先选分区",
            //             type:'error'
            //         })
            //         return false;
            //     }
            //     const zoneID = this.projectDatail.ID
            //     //获取数据列表
            //     designZtree({"zoneID":zoneID}).then(
            //         response=>{
            //             this.dataZtree= response.data.methodDesign;
            //             this.dataCheck = response.data.dataCheck;
            //             this.dataZtree.forEach((val)=>{
            //                 if(val.children!=undefined){
            //                     const showls =  val.children.filter((a)=>{
            //                         return this.dataCheck.includes(a.ID)
            //                     })
            //                     showls.length>0 && showls.map((data)=>{
            //                         this.dataCheckChange(data,"true",'null') //渲染默认勾选的数据
            //                     })
            //                 }
            //             })
            //         }
            //     )
            // }
            // else{
                this.restData();
            // }
        },
        // 获取项目列表
        getProList() {
            projectZtree().then(
                response => {
                    this.proZtreeData = response.data;
                    const R = (f, s) => {s.map(i => (
                        f(i), i.zoneList && i.zoneList != undefined ? R(f, i.zoneList):0, i
                    ))
                    return s
                    }
                    const data = R(i => {                                              
                            i.ID = i.projectId===undefined ? i.zoneId: i.projectId
                            i.label = i.projectName===undefined ? i.zoneName: i.projectName
                        }, this.proZtreeData) 
                    }
            );
        },
        //获取异常列表
        getProData(zoneId) {
            //获取测区信息
            // let geo = res.data.theGeom.split(",")
            // this.center = [parseFloat(geo[2].split(" ")[0]) ,parseFloat(geo[2].split(" ")[1])]
            // this.createMap(this.center);
            //无绑定信息
            getRouteList(zoneId).then(
                (res)=>{
                    this.clearWKT();
                    if(res.data.length!=0){
                        this.$store.dispatch('getGirdData',zoneId).then(
                        ()=>{
                            let girdData= this.$store.getters.girdData;
                            girdData.forEach(val=>{
                                    this.drawWKT(val,'blockId','createBy');
                                })
                            //重新获取列表
                            this.$store.dispatch('getDesignData',zoneId).then(
                                ()=>{
                                    this.errorData = this.$store.getters.featureData;
                                })
                        }
                        )
                        res.data.forEach(val=>{
                            this.drawWKT(val,'routeId','createBy')
                            if(val.theGeom){
                                let a = val.theGeom.split(",")[2].split(" ")
                                let center = [parseFloat(a[0]),parseFloat(a[1])]
                                let view = this.MyMap.getView();
                                view.setZoom(16)
                                view.setCenter(center)
                            }
                        })
                    }
                    else{
                        this.msgError("无数据信息！");
                        this.clearWKT();
                        this.errorData = [];
                        return
                    }
                }
            )
        },
        //ztree选中事件
        handleCheckChange(data,checked,node){
            if(data.children==undefined){
                if(checked){
                    drawWKT(data);
                }
                else{
                    removeWKT(data);
                }
            }      
        },
        // ztree过滤
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        //数据勾选
        dataCheckChange(data,checked,node){
            if(data.children==undefined){
                let paramsInfo={"dataType":'',"zoneID":null}
                paramsInfo.zoneID = this.projectDatail.ID;
                paramsInfo.dataType = data.dataType;
                let featureInfo = this.$store.getters.featureData[paramsInfo.dataType+paramsInfo.zoneID];
                if(checked){
                    //如果数据不存在则从新获取 否则直接渲染
                    if(featureInfo==undefined){
                        //通过数据类型请求数据
                        this.$store.dispatch("getDesignData",paramsInfo).then(() => {
                            featureInfo = this.$store.getters.featureData[paramsInfo.dataType+paramsInfo.zoneID];
                            this.errorData = data.dataType=='异常点'?featureInfo:[];
                            featureInfo.map(val=>{
                                    drawWKT(val);
                                })
                            }).catch((error) => {
                                this.Message({
                                message:"获取数据失败",
                                type:'error'
                            })
                          
                        })
                    }else{
                        this.errorData = data.dataType=='异常点'?featureInfo:[];
                        featureInfo.map(val=>{
                            drawWKT(val);
                        })
                    }
                }
                else{
                    this.errorData = [];
                    featureInfo&&featureInfo.map(val=>{
                            removeWKT(val);
                        })
                }
            }
        },
        ///地图操作===================================
         //切换地图
        setMap(mapType){
            this.cesiumShow = false
            const mapList = this.$store.state.baseMapList;
            const maplayer= mapType=='mapserver'?mapList[0]:mapList[1];
            this.showMapType = mapType;
            this.setBaseMap(maplayer);
        },
        //监听删除异常,成功后调用
        deleteChange(value){
            if(value){
                this.errorData.forEach(
                    (item)=>{
                        this.removeWKT(item,'abnormalId','abName')
                    }
                )
                //重新获取列表
                this.$store.dispatch('getDesignData',this.zoneId).then(
                        ()=>{
                            this.errorData = this.$store.getters.featureData;
                        }
                    )
            }
        },
        //创建地图
        createMap(cent) {
            let setCen = cent?cent:[113.94261734587297, 22.57669954443905]
            this.MyMap = new ol.Map({
                target: 'map',
                logo: false,
                layer:[],
                view: new ol.View({
                    projection: "EPSG:4326",
                    center: setCen,
                    zoom: 17,
                    minZoom: 6,  
                    // maxZoom: 18.5
                }),
            })
            let temp = null
            const mousePositionControl = new ol.control.MousePosition({
                coordinateFormat: function (coordinate) {
                temp = coordinate
                    return ol.coordinate.format(coordinate, '经度:{x}°E 纬度:{y}°N', 2)
                },
                projection: 'EPSG:4326',
                className: 'ol-mouse-position',
                target: document.getElementById('mouse-position'),
            })
            this.MyMap.addControl(mousePositionControl)// 实例化坐标拾取控件，并加入地
            this.MyMap.addLayer(this.baseMapLayer.tileLayer) //矢量图
            this.MyMap.addLayer(this.baseMapLayer.labelLayer) //影像图
            var container = document.getElementById('popup');
            var content = document.getElementById('popup-content');
            this.overlay = new ol.Overlay({
                element: container,
                autoPan: true,
                autoPanAnimation: {
                    duration: 250,
                },
            });
            this.MyMap.addOverlay(this.overlay);
        },
        // 设置底图 地图切换
        setBaseMap (layer) {
            this.MyMap.removeLayer(this.baseMapLayer.tileLayer)
            this.MyMap.removeLayer(this.baseMapLayer.labelLayer)
            let source = null
            let type = layer.typeName
            let url = layer.url
            let labelSource = this.baseMapLayer.labelLayer.getSource()
            if (labelSource) {
               this.baseMapLayer.labelLayer.setSource(null)
            }
            if (type === 'tianditu' || type === 'xyz') {
                source = new ol.source.XYZ({
                // crossOrigin: 'anonymous',
                url: url.split('|')[0]
                })
                let labelSource = new ol.source.XYZ({
                // crossOrigin: 'anonymous',
                url: url.split('|')[1]
                })
                this.baseMapLayer.labelLayer.setZIndex(-1)
                this.baseMapLayer.labelLayer.setSource(labelSource)
            }
                this.baseMapLayer.tileLayer.setSource(source)
                this.baseMapLayer.tileLayer.setZIndex(-2)
                this.MyMap.addLayer(this.baseMapLayer.tileLayer)
                this.MyMap.addLayer(this.baseMapLayer.labelLayer)
                this.MyMap.index = -1
            },
        //绘制图形
        drawWKT(geomstring,objId,objName) {
                let wkt = geomstring.theGeom
                let format = new ol.format.WKT(wkt)
                let feature = format.readFeature(wkt)
                feature.properties=geomstring
                const geoType = this.getGeoType(wkt); //判断数据点线面  
                // let mycolor = geomstring.showColor
                let vectorWKT = new ol.layer.Vector({
                        source: new ol.source.Vector({
                            features: [feature]
                        }),
                        opacity: 0.9,
                        style:FeatureStyle.getStyle(geoType,geomstring.abStatus)
                })
                this.MyMap.removeInteraction(this.selectSingleClick);//移除之前的图层
                this.vetorList.push(vectorWKT)
                this.selectSingleClick = new ol.interaction.Select({
                    layers: this.vetorList,
                    style: new ol.style.Style({
                        image: new ol.style.Circle({
                            radius: 5,
                            fill: new ol.style.Fill({
                                color: '#09f'
                            }),
                            stroke: new ol.style.Stroke({
                                color:'#fff',
                                width: 4
                            })
                        }),
                        stroke: new ol.style.Stroke({
                            color: '#232B99',
                            width: 4
                        }),
                        fill: new ol.style.Fill({
                            color: 'rgba(114,111,228,0.8)'
                        })
                    }),
                    hitTolerance:0
                });
                // selectSingles[geomstring.ID+geomstring.name] = selectSingleClick;
                this.MyMap.addInteraction(this.selectSingleClick);
                this.MyMap.selectSingleClick =this.selectSingleClick;
                this.selectSingleClick.on('select', this.poiClick); //图层点击
                this.wktLayers[geomstring[objId]+geomstring[objName]] = vectorWKT
                this.MyMap.addLayer(vectorWKT);
            },
        //移除绘制图层
        removeWKT (geomstring,objId,objName) {
            let wkt = geomstring[objId]+geomstring[objName]
            if(this.wktLayers[wkt]!=undefined) {
                let index = this.vetorList.indexOf(this.wktLayers[wkt])
                index>-1&&this.vetorList.splice(index, 1);
                this.MyMap.removeLayer(this.wktLayers[wkt])
                this.overlay.setPosition(undefined);
                delete this.wktLayers[wkt]
                }
            },
        //清除所有图层
        clearWKT() {
            this.vetorList=[]
            Object.keys(this.wktLayers).forEach(key => {
                this.MyMap.removeLayer(this.wktLayers[key])
                delete this.wktLayers[key]
                })
            },
        //列表要素点击事件
        flyToFeature(dataFeature,objId,objName){
            let wkt = dataFeature[objId]+dataFeature[objName];
            if(this.wktLayers[wkt]!=undefined){
                let selectLayer = this.wktLayers[wkt];
                let feature =selectLayer.getSource().getFeatures()[0]; 
                let coordinate = this.getCoordinate(feature);
                this.overlay.setPosition(undefined);
                this.MyMap.selectSingleClick.getFeatures().clear()//先清空
                // console.log(this.MyMap.selectSingleClick.getFeatures())
                this.MyMap.selectSingleClick.getFeatures().push(feature);
                this.MyMap.getView().setZoom(18);
                this.flyTo(coordinate)
            }
        },
        //图层点击事件
        poiClick(evt){
            let feature = evt.selected[0];
            if(feature!=undefined){
                // console.log(this.MyMap.selectSingleClick.getFeatures())
                let coordinate = this.getCoordinate(feature,evt);
                let propertiesVal = feature.properties;
                this.$store.dispatch('changClickMap', propertiesVal);//图层点击
                // console.log(propertiesVal)
                if(typeof jsToNative=="function"&&propertiesVal.bstatus){
                    jsToNative('EnterBlockAnalyze',propertiesVal.blockId)
                }
                this.overlay.setPosition(coordinate);
            }
            else{
                this.MyMap.selectSingleClick.getFeatures().clear()
                this.$store.dispatch('changClickMap', {})
                this.overlay.setPosition(undefined);
            }
        },
        flyTo(location){
            let view = this.MyMap.getView();
            view.animate({
                center: location,
                duration: 1000
            });
        },
        /**计算中心点坐标 */
        getCoordinate(feature,evt){
            let coordinate = [];
            if(feature!=undefined){
                let geometry = feature.getGeometry();
                if (geometry instanceof ol.geom.Point) {  //拿到点的坐标
                    coordinate = geometry.getCoordinates();
                } else{
                    coordinate = geometry.getCoordinates()[0]; //获取一个坐标数组的边界，格式为[minx,miny,maxx,maxy]
                    
                }
            }
            return coordinate
        },
        //数据类型判断
        getGeoType(geo){
                if(geo.indexOf("POLYGON")!=-1){
                    return "POLYGON"
                }
                else if(geo.indexOf("LINESTRING")!=-1){
                    return "LINESTRING"
                }
                else if(geo.indexOf("MULTIPOLYGON")!=-1){
                    return "POLYGON"
                }
                else if(geo.indexOf("minLine")!=-1){
                    return "minLine"
                }
                else if(geo.indexOf("POINT")!=-1){
                    return "POINT"
                }
                else if(geo.indexOf("ICON")!=-1){
                    return "ICON"
                }
                else if(geo.indexOf("oldICON")!=-1){
                    return "oldICON"
                }
                else{
                    return ""
                }
        },
        //添加wms服务
        addWMS(url){
            let wmslayer = new ol.layer.Tile({
				source:new ol.source.TileWMS({
					url:url
				})
			})
            this.wktLayers[url] = wmslayer
            this.MyMap.addLayer(wmslayer);
        },
        //移除wms图层
        removeWMS(url){
            if(this.wktLayers[url]!=undefined) {
                this.MyMap.removeLayer(this.wktLayers[url])
            }
        },
        //添加热力图
        addHeatPic(val){
            // val = {"type":"Point", "properties": {"value":40},"coordinates":[117.013689,36.709376]}
            let vector = new ol.layer.Heatmap({
                source: new ol.source.Vector({
                    features: (new ol.format.GeoJSON()).readFeatures(val, {
                        dataProjection: 'EPSG:4326',
                        featureProjection: 'EPSG:4326'
                    })
                }),
                blur:10,
                radius: 10,
                weight: function (feature) {
                    // 2012_Earthquakes_Mag5.kml stores the magnitude of each earthquake in a
                    // standards-violating <magnitude> tag in each Placemark.  We extract it from
                    // the Placemark's name instead.
                    var name = feature.get('value');
                    return name;
                },
                });
            // this.wktLayers[url] = vector
            this.MyMap.addLayer(vector);  
            let view = this.MyMap.getView();
            //view.setZoom(16)
            view.setCenter([117.013689,36.709376])
        },

        //获取钻孔属性值
        getPnameData(params){
            getPname(params).then(res=>{
                this.pnameList = res.data
            })
        },
        //获取钻孔高度范围
        getDepthRangeData(params){
            getDepthRange(params).then(res=>{
                if(res.data.maxdep>15){
                     this.pheightList = res.data.maxdep
                }
               
            })
        },
        //添加等值面
        addlayerImage(data){
            this.removeLayerImage(this.layerImgUrl)
            let extent = [data.maxLon,data.maxLat,data.minLon,data.minLat]
            let url = data.fileName
            let img = new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url:this.baseUrl+url,
                    projection: "RPSG:4326",
                    imageExtent: extent
                }),
                opacity:0.8
                })
            this.wktLayers[url] = img
            this.layerImgUrl=url
            this.MyMap.addLayer(img);  
        },
        //添加历史遥感
        addHistoryImage(data){
            this.removeLayerImage(data.stageId)
            let extent = JSON.parse(data.range)
            let url = data.remotePath
            let img = new ol.layer.Image({
                source: new ol.source.ImageStatic({
                    url:this.baseUrl+url,
                    projection: "RPSG:4326",
                    imageExtent: extent
                }),
                opacity:0.8
                })
            this.wktLayers[data.stageId] = img
            this.MyMap.addLayer(img);  
        },
        removeLayerImage(url){
            this.MyMap.removeLayer(this.wktLayers[url])
            delete this.wktLayers[url]
        },
        //钻孔开遍数值或深度
        changePic(){
            console.log(this.sliderValue+"====="+this.radio)
            if(!this.radio){
                this.msgInfo("未选择属性")
                return 
            }
            let params = {
                projectId:this.projectId,
                zoneId:this.zoneId,
                pname:this.radio,
                mindep:this.sliderValue[0],
                maxdep:this.sliderValue[1]
            } 
            getRenderDrillImg(params).then(res=>{
                this.addlayerImage(res.data)
            })
        },
        //遥感影像变换
        selectChange(bln,row){
            if(bln){
                this.addHistoryImage(row)
            }else{
                this.removeLayerImage(row.stageId)
            }
        },
        taggleLeftList(){
            this.showLeftList = !this.showLeftList
        },
        /**显示异常列表按钮 */
        taggleErroList(){
            this.showErroList = !this.showErroList
        },
        //右侧列表展示与否
        taggleRightList(){
            this.showRightList = !this.showRightList
        },
        //结合echert绘制热力图
        drawEm(list){
            if(this.echartlayers!=undefined){
                        this.echartlayers.remove()
                    }
            let center = [list.data[0][0],list.data[0][1]]
            let res={
                animation: false,
                bmap: {
                    center:center,
                    zoom: 34,
                    roam: true
                },
                visualMap: {
                    show: false,
                    top: 'top',
                    min: -30,
                    max: 200,
                    seriesIndex: 0,
                    calculable: true,
                    inRange: {
                    color: ['blue', 'blue', 'green', 'yellow', 'red']
                    }
                },
                series: [{
                    type: 'heatmap',
                    coordinateSystem: 'bmap',
                    data: list.data,
                    pointSize: 5,
                    blurSize: 6
                }]
            }
            //迁徙图图层初始化
            var echartslayer = new EChartsLayer(res);
            echartslayer.appendTo(this.MyMap)
            let view = this.MyMap.getView();
            view.setZoom(18)
            view.setCenter(list.data[0])
            return echartslayer
        },
        removeEm(){
            if(this.echartlayers){
                this.echartlayers.remove()
            }
        }
    }
    
}
</script>
<style scoped lang="scss">
.cav-map{
    height: calc(100vh - 120px);
    position:relative;
    overflow: hidden;
}
.description {
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    word-break: break-all;
    margin-block-end: 0px;
    margin-block-start: 0px;
}

.clearfix .el-form-item {
    margin-bottom: 5px;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: ""; /*不用有内容也可以*/
}

.clearfix:after {
    clear: both;
}

.clearfix {
    *zoom: 1;
}
.delete {
    margin-top: 25px;
    margin-left: 1px;
}
.formbox{
    /* padding:20px 20px; */
}
.projectManage{
    height: 100%;
    width: 100%;
    background: white;
    margin-bottom: 10px;
}
.addPro{
    text-align: center;
}
.addPro button{
    display: inline-block;
    margin-top: 15px;
}
.projectCard {
    height: 100%;
}
.dataListItem {
    height: calc(100vh - 120px);
    overflow: auto
}
.proDatail .el-card__body{
    padding: 0px 0px;
}
.proDatail ul{
    padding: 0px ;
    margin: 0px;
}
.list-group-item{
    border: none;
    padding: 8px 0px;
}
.list-group-item label{
    display: inline-block;
    width: 25%;
    text-align: right;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.list-group-item .pull-left{
    margin-left: 7%;
    display: inline-block;
    text-align: left;
    width: 68%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}
.DatailCard{
    padding: 0px 6px;
}
.proDatail{
    margin-top: 30px;

}

.otherInfo,.proInfo{
    padding:0px 40px;
}
.el-tag + .el-tag {
    margin-left: 10px;
    margin-bottom: 10px;
}
.ztreeNode {
    display: inline-block;
    float: right;
}
.projectBox{
    /* max-height: 340px; */
    overflow-x: hidden;
    overflow-y: scroll;
    height: 700px;
    font-size: 13px;
    padding: 0 10px;
}
.projectBox::-webkit-scrollbar {
        display: none;
    }
.custom-tree-node{
    display: flex;
    align-items: center;
    font-size: 14px;
    .checkbox{
        display: inline-block;
        input[type="checkbox" i] {
        } 
    }
    width: 100%;
    .uploadIcon{
        display: inline-block;
        position: absolute;
        right: 20px;
        // bottom: 5px;
        .el-button{
            padding: 0px;
        }
    }     
}
.custom-tree-node .node-text{
    display: inline-block;
    width: 70%;
    white-space: nowrap;
    /* text-overflow: ellipsis; */
    overflow: hidden;
    
}
.node-text::-webkit-scrollbar {
        display: none;
    }
#map{
    width: 100%;
    height: 100%;
}
#cesiumContainer {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background:#000;
    /* overflow: hidden; */
}
.setMap{
    position: absolute;
    bottom: 5px;
    right: 20px;
    padding: 4px ;
    background: #fff;
    width: 218px;
    box-sizing: border-box;
    display: flex;
    display: -webkit-flex; /* Safari */
    justify-content: space-between;
    align-items: center;
}
.setMap .active{
    border: 2px $main-color solid;
}
.mapbox{
    width: 100px;
    height: 70px;
    /* border: 1px #fff solid; */
    background-size:50% 50% ;
    background-position: 0px 0px;
    cursor: pointer;
    position: relative;
}
.mapbox:hover{
    border: 2px $main-color solid;
}
.mapbox span{
    text-align: center;
    display: inline-block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    background-image: linear-gradient(to top, $main-color 0%, rgba(46, 139, 231, 0) 100%);
    color: #fff;
}
.mapserver{
    display: inline-block;
    background: url("../../assets/images/map_server.png") no-repeat ;
}
.imgserver{
    display: inline-block;
    background: url("../../assets/images/img_serve.png") no-repeat ;
}
.threeDserver{
    display:inline-block;
    background:url("../../assets/images/3Dserver.jpg") no-repeat;
}
.erro-list-group{
    position: relative;
    width: 100%;
    .erro-list {
            position: absolute;
            bottom: 0;
            transition: bottom 0.5s;
            padding:0px;
            width:100%;
        }
    .hiddenList{
            bottom:-350px !important;
        }
    .erro-list-show {
        display: flex;
        justify-content: center;
    }
    .erro-list-show button{
        /* display: flex;
        justify-content: center;
        align-items: center; */
        padding-top:3px ;
        padding-bottom:5px ;
        /* border: 0px; */
        /* background: #DADDE9; */
        border-radius: 4px 4px 0px 0px;
        width: 96px;
        height: 18px;
    }
}
.right-list-group{
    position: absolute;
    height: 100%;
    width:10px;
    top: 0px;
    right: 0px;
    z-index: 100;
    .content-list {
            position: absolute;
            right: 0px;
            transition: right 0.5s;
            padding:0px;
            width:200px;
            height: 100%;
            background: #3066FF;
        }
    .contentHiddenList{
            right:-200px !important;
        }
    .content-list-show {
        position: absolute;
        top: 50%;
        left: -57px;
        transform: rotate(-90deg);
    }
    .content-list-show button{
        /* display: flex;
        justify-content: center;
        align-items: center; */
        padding-top:3px ;
        padding-bottom:5px ;
        /* border: 0px; */
        /* background: #DADDE9; */
        border-radius: 4px 4px 0px 0px;
        width: 96px;
        height: 18px;

    }
}
.left-list-group{
    position: absolute;
    height: 100%;
    width:10px;
    top: 0px;
    left: 0px;
    z-index: 100;
    .content-list {
            position: absolute;
            left: 0px;
            transition: left 0.5s;
            padding:0px;
            width:350px;
            height: 100%;
            // background: #3066FF;
        }
    .contentHiddenList{
            left:-350px !important;
        }
    .content-list-show {
        position: absolute;
        top: 50%;
        right: -57px;
        transform: rotate(90deg);
    }
    .content-list-show button{
        /* display: flex;
        justify-content: center;
        align-items: center; */
        padding-top:3px ;
        padding-bottom:5px ;
        /* border: 0px; */
        /* background: #DADDE9; */
        border-radius: 4px 4px 0px 0px;
        width: 96px;
        height: 18px;
    }
}

.a-focus{
    // color: $main-color;
    background: RGB(21,86,239,0.5) !important;
}
.project-list {
    margin: 0px 0px 20px 0px;
    padding: 0;
    list-style: none;
}
.project-list__item:hover{
    background-color: #F5F7FA;
    outline: none;
    color:$main-color;
    cursor: pointer;
}
.project-list__item:focus{
     outline: none;
}
.project-list__item:first-child {
    margin-top: 10px;
}
.project-list__item {
    transition: all .5s cubic-bezier(.55,0,.1,1);
    font-size: 14px;
    color: #606266;
    line-height: 1.8;
    margin-top: 5px;
    position: relative;
    box-sizing: border-box;
    border-radius: 4px;
    width: 100%;
}
.project-list__item-name {
    color: #606266;
    display:inline-block;
    margin-right: 10px;
    width: 80%;
    padding-left: 4px;
    transition: color .3s;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.block{
    position: absolute;
    top: 30px;
    right: 20px;
    padding: 10px ;
    background: #fff;
    width: 350px;
    box-sizing: border-box;
    background: rgba(191, 191, 191, 0.8);
    .icon{
        display: block;
        position: absolute;
        top: 5px;
        right: 5px;
        font-size: 16px;
        cursor: pointer;
        color: #000  
    }
    .row{
        display: flex;
        display: -webkit-flex; /* Safari */
        justify-content: space-between;
        align-items: center;
        span{
        display: inline-block;
        }
        .slider{
            width: 75%;
            display: inline-block;
        }
    }
    .el_radio{
        padding: 5px ;
        width: 100px;
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
    }
}

//右击弹框
.contextmenu {
    margin: 0;
    z-index: 3000;
    position: absolute;
    list-style-type: none;
    padding: 5px 0;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 400;
    box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
    background: #fff;
    padding: 5px 0;
    color: #333;
}
.contextmenu li {
    margin: 0;
    padding: 7px 16px;
    cursor: pointer;
}
.contextmenu li:hover {
    color: #3066FF;
}
.dialogBox{
    width: 30%;
    padding: 0px 20px;
}
.projectManages{
    .projectName{
        padding: 8px 0px;
        border-bottom:1px solid #DADDE9;
        border-top:1px solid #DADDE9;
        display: flex;
        justify-content: space-between;
        .name{
            width: 60%;
            padding:inherit;
            display: inline-block;
            overflow: hidden;
            text-overflow:ellipsis;
            white-space: nowrap;
        }
        .projectBtn{
            float: right;
        }
    }
}

</style>
